表單的運用幾乎隨處可見，登入/註冊頁面、購買頁面、基本資料頁面...等，過去在不會框架之前都只是用HTML切出畫面，再用JS送資料，今天就要來了解React怎麼幫我們處理表單。

在React中我們使用Controlled Component監控使用者輸入行為，每次的輸入帶來的改變就是透過state管理，如官方範例:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
		//初始值為""空值
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

流程是這樣的

1. constructor設定初始value值，將其填入input的value
2. 當onChange被觸發時handleChange被呼叫，event.target.value被更新
3. 送出表單觸發onSubmit，alert出現並將最後的this.state.value顯示出來

有Controlled Component就意味著也有Uncontrolled Components，表單的資料是由 DOM 本身所處理的，使用 ref
 來從 DOM 取得表單的資料，而不是為了每個 state 的更新寫 event handler。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

1. constructor使用React.createRef()
2. 給input一個ref屬性
3. 當輸入資料時ref資料會更新到this.input裡面
4. 送出表單時handleSubmit使用this.input.current.value從constructor中抓取資料顯示alert